/* eslint-disable @typescript-eslint/no-unused-vars */
import { Modal, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import Highlight from './highlight'

const { TabPane } = Tabs;

export type ViewcodeProps = {
    datas: Record<string, string>;
    visible: boolean;
    onCancel: () => void
}
const Viewcode: React.FC<ViewcodeProps> = (Props) => {
    const { datas, visible, onCancel } = Props;



    return (
        <>
            <Modal
                title="预览"
                centered
                visible={visible}
                onOk={onCancel}
                onCancel={onCancel}
                width={1500}
                footer={null}
            >
                <Tabs defaultActiveKey="1" >
                    {Object.keys(datas).map((value: string) => {
                        const vmName = value.substring(value.lastIndexOf("/") + 1, value.indexOf(".vm"));
                        const language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);

                        return (<TabPane tab={vmName} key={value}>
                            <div style={{ height: 600, overflowY: 'scroll' }}>
                                {<Highlight language={language} content={datas[value]}/>}
                            </div>


                            {/* <Highlight language={language} content={datas[value]} /> */}
                        </TabPane>)
                    })}
                </Tabs>


            </Modal>
        </>
    )
}
export default Viewcode;